<!-- 左侧导航组件 -->
<!-- 使用说明：<side-bar></side-bar> -->
<template>
    <div id="sidebar-wrap" class="sb-container">
      <el-scrollbar wrap-class="scrollbar-wrapper" >
        <el-tree ref="tree"
                 :props="props1"
                 :data="data"
                 :load="loadNode1"
                 lazy
                 @node-click="handleNodeClick"
                 node-key="id"
                 show-checkbox
                 :default-checked-keys="checkedKey"
                 :default-expanded-keys="expandedKey"

          :render-content="renderContent">
        </el-tree>
      </el-scrollbar>
    </div>
</template>
<script>
  import {disableBtn, df, $err, $suc, ERRS, SUCS} from '@/utils'
  import {fetchGet, createOne, deleteOne, deletePost, getOne, rolesAll, updateOneNoId} from '@/api/common'

  export default {
    name: "sidebar",
    props: {  //子组件接收父组件中的数据,预定义默认值
      selGetData: {
        type: Array,
        default: []
      },
      searchData: {
        type: Object,
        default: {}
      },
      changeSearchData:Array,  //select框选中后的多级数组
      selectId: {
        type: Array,
        default: []
      },
      levStatus: Number
    },
    data() {

      return {
        isMusicOn: false,
        isUnique: true,
        isRouter: true,
        data:  [],
        props1: {
          label: 'explainText',
          children: 'children',
          isLeaf: 'leaf'
        },
        expandedKey:[],
        checkedKey:[]
      };
    },
    watch:{
      //搜索框 handleSelect Promise.all 多条异步后 ,this.changeSearchData 值改变
      changeSearchData(newdata){
        console.log(8898,newdata);

        this.$set(this.expandedKey, [])   //展开重置
        this.$refs.tree.setCheckedKeys([]); //选中重置
        for (var i of newdata) {  // 1 - n级
          let node=this.$refs.tree.getNode(i.id) // node 当前级的 node
          this.$refs.tree.setCurrentNode(node);   //通过node选中当前节点
          let parentId=node.data.id

          console.log(9991,node.childNodes.length);
          if(node.childNodes.length>0){ //当前节点的子节点已加载
            console.log('80当前节点的子节点已加载 '+node.childNodes.length);
          }else{
            console.log('82当前节点没有子节点异步加载 '+node.childNodes.length);
            //寻找当前级的child数组
            let level=parseInt(node.data.level)
            let data=this.selGetData[level] //data
            console.log(7781899,node)
            console.log(29,this.selGetData)
            console.log(29,data)
            //当前级node 插入 子级
            for(let v of data){
              this.$refs.tree.append(v,node)
            }
          }

          this.$refs.tree.setChecked(parentId,true); //已有数据,通过id选中当前节点
          this.expandedKey.push(parentId) //选中的点打勾
        }
      }
    },

    // <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
    // <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>

    methods: {
      renderContent(h, { node, data, store }) {
        return (
            <div class="custom-tree-node1" style="font-size:14px">
              <span >{node.label}</span>
              <span></span>
            </div>
      );
      },

      //节点点击事件
      handleNodeClick(data) {
        this.$refs.tree.setCheckedKeys([]);
        // this.$refs.tree.setCheckedKeys([data.id]); ////通过id选中当前节点及子节点
        this.$refs.tree.setChecked(data.id,true); //通过id选中当前节点
        this.$emit('sbgetList',data)
      },
      loadNode1(node, resolve) {
        // console.log(999,node)
        var me=this;
        if (node.level === 0) {
          // console.log(100)
          this.data=this.selGetData[0]
          return resolve(this.data);
        }
        if (node.level > 0) {
          let parentId=node.data.id
          let level=node.data.level
          fetchGet(`codeExplains/child?parentId=${parentId}`).then(res => {
            // console.log(res);
            if (res.data.code === 0) {
              let dat = res.data;
              let data = dat.data;
              //拼接 6 电气备件
              data.forEach((v, i) => {
                data[i].selectText = v.codeNo + ' ' + v.explainText
              });
              this.selGetData[level]=data
                setTimeout(function(){
                  console.log('160异步加载勾选 parentId: '+parentId)
                  me.$refs.tree.setCheckedKeys([]);
                  me.$refs.tree.setChecked(parentId,true);  //	通过 keys 设置目前勾选的节点，http://element-cn.eleme.io/#/zh-CN/component/tree
                },200)
              return resolve(data);
            } else {
              this.selGetData[level]=[]
              return resolve([]);
              ERRS(res.data.message)
            }

          })
          // console.log(111,node.level)
          // return resolve(this.selGetData[0]);
        }
      },

    }
  }
</script>

<style scoped lang="scss">
  .sb-container{
    height: 100%;
    overflow: hidden;
    border: 1px solid #eaecf0;
    border-radius: 5px;
  }

  .scrollbar-wrapper {
    height: calc(100vh - 51px);
    overflow-x: hidden!important;
    .el-scrollbar__view {
      .el-tree{
        /*background: #f3f3f4;*/
        /*background: #fdf4df;*/
        border-radius: 5px;
        color: #476094;
        width: 100%;
        height: calc(100vh - 88px);

        .el-tree-node {
          .el-tree-node__content {
          }
        }
      }
    }
  }


  .el-submenu .el-tree-item {
    padding: 0 20px;
    min-width: 160px;
    padding-left: 20px !important;
    &:hover { // 美化左侧导航的留白
      background:green;
    }
  }

  // 改变元素属性，要不动画效果不管用，是不是很厉害啊？哈哈哈
  .rythm.twist1 {
    display: block;
  }
  .el-tree-node__label {
    font-size: 20px;
  }


</style>
